<template>
	<view class="approval">
		<view v-for="(item,index) in options">
			<view class="approval-item">
				<view class="approval-item-left">
					<view class="approval-avatar round" :style="[{ backgroundImage:'url(' +item.img+ ')' }]">
						<view v-if="item.icon != null" class="approval-tag badge">
							<uni-icons :color="item.icon.color" :type="item.icon.type" size="14"/>
						</view>
					</view>
					<view class="content-column">
						<view class="title">{{item.title}}</view>
						<view class="subtitle">{{item.subtitle}}</view>
					</view>
				</view>
				<view class="approval-item-right">{{item.desc}}</view>
			</view>
			<view v-if="index!=options.length-1" class="approval-line"></view>
		</view>
	</view>

</template>

<script>
	import uniIcons from '../uni-icons/uni-icons.vue'
	export default {
		name: 'approval-steps',
		components:{
			uniIcons
		},
		data() {
			return {

			};
		},
		props: {
			options: {
				type: Array,
				default () {
					return []
				}
			} // 数据
		},
	}
</script>

<style>
	.approval {
		width: 100%;
		background-color: #FFFFFF;
	}

	.approval-item {
		min-height: 100upx;
		display: flex;
		justify-content: space-between;
		padding: 25upx 25upx;
	}

	.img-head {
		background: #007AFF;
		width: 80upx;
		height: 80upx;
		top: 0;
	}

	.approval-item-left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.approval-item-right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 22upx;
		color: #AAAAAA;
	}

	.content-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 30upx;
	}

	.content-column .title {
		font-size: 28upx;
	}

	.content-column .subtitle {
		margin-top: 2upx;
		color: #AAAAAA;
		font-size: 22upx;
	}

	.approval-line {
		margin-left: 58upx;
		display: inline;
		padding:10upx 3upx;
		background-color: #DADADA;
	}

	/* ==================
	          头像
	 ==================== */

	.approval-avatar {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background-color: #ccc;
		color: #ffffff;
		white-space: nowrap;
		position: relative;
		width: 68upx;
		height: 68upx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
	}
	
	.approval-tag {
		font-size: 24upx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0upx 16upx;
		height: 48upx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}

	.approval-tag.badge {
		background-color: #FFFFFF;
		border-radius: 200upx;
		position: absolute;
		bottom: 0upx;
		right: -10upx;
		font-size: 20upx;
		padding: 0upx 10upx;
		width: 28upx;
		height: 28upx;
		color: #ffffff;
	}
	
	.round {
		border-radius: 5000upx;
	}
</style>
